<template>
    <div>
        <sc-dialog
            title="海康授权学生"
            v-model="propValue"
            custom-class="addSchoolPopup"
            width="60vw"
            top="50px"
            @close="$emit('input', false)"
            @open="_open"
        >
            <el-form ref="form" :model="form" label-width="80px" style="width: 500px; margin: 0 auto"></el-form>
            <div class="dialog-content" style="padding: 20px 0">
                <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
                <el-table :data="tableData" border highlight-current-row style="width: 100%; margin-top: 20px">
                    <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" type="danger"><a href="/static/admin/file/海康学生授权模板.xlsx">下载模板</a></el-button>
                <el-button size="mini" @click="_close">取 消</el-button>
                <el-button size="mini" type="primary" @click="handleResolve">导 入</el-button>
            </span>
        </sc-dialog>

        <el-dialog title="学生姓名" :visible.sync="dialogVisible" width="50vw">
            <div class="nameBox">
                <span v-for="(item, index) in names" :key="index">{{ item }}</span>
            </div>
            <div slot="footer">
                <el-button @click="dialogVisible = false">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import UploadExcelComponent from 'admin/components/UploadExcel/index.vue'

export default {
    name: 'UploadExcel',
    components: { UploadExcelComponent },
    props: {
        currentData: {
            type: Object,
            default: () => ({}),
        },
        value: {
            type: Boolean,
            default: false,
        },
        rowData: {
            type: Object,
            default: () => ({}),
        },

        onLoad: Function,
    },
    data() {
        return {
            form: {},
            tableData: [],
            tableHeader: [],
            studentNames: [],
            dialogVisible: false,
            names: [],
        }
    },
    computed: {
        propValue: {
            get() {
                return this.value
            },
            set(nval) {
                this.$emit('input', nval)
            },
        },
    },
    methods: {
        //关闭弹窗
        _close() {
            this.$emit('input', false)
        },
        _open() {
            this.tableData = []
            this.tableHeader = []
            this.studentNames = []
        },
        beforeUpload(file) {
            const isLt1M = file.size / 1024 / 1024 < 1

            if (isLt1M) {
                return true
            }

            this.$message({
                message: '请不要上传大于 1m 的文件。',
                type: 'warning',
            })
            return false
        },
        handleSuccess(sheets) {
            this.tableData = sheets[0].results
            this.tableHeader = sheets[0].header
        },
        // 授权
        async handleResolve() {
            let arr = []
            this.tableData.forEach((v) => {
                arr.push(v['姓名'] || '')
            })
            if (this.tableData.length === 0) {
                return this.$message.error('请上传学生数据!!!')
            }
            const loading = this.$scLoading('正在录入...')
            let params = {
                levelIds: this.currentData.id,
                excelStudentInfo: arr,
            }
            let { code, data, msg } = await this.$api.schoolConfig.studentList.authorizationStudent(params)
            if (code === 200) {
                loading.close()
                this.$message.success('授权成功！' || msg)
                if (data.length > 0) {
                    this.dialogVisible = true
                    this.names = data
                }
                this.$emit('input', false)
            } else {
                setTimeout(() => {
                    loading.close()
                }, 5 * 1000)
            }
            this.$emit('success')
        },
    },
}
</script>

<style lang="scss" scoped>
.nameBox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 30px;
    &>span{
        margin-right: 15px;
    }
}
</style>
